<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="common/include :: header('编辑文章')" />
	<th:block th:include="common/include :: select2-css" />
    <th:block th:include="common/include :: editormd-css" />
    <th:block th:include="common/include :: jquery-tags-input-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-article-edit" class="form-horizontal" th:object="${article}">
            <input name="id" type="hidden" th:field="*{id}" />
            <input name="subId" type="hidden" th:field="*{subId}" />
            <input name="catalogId" type="hidden" id="catalogId" th:field="*{catalogId}"/>
            <input name="lastArticleId" type="hidden" id="lastArticleId" th:field="*{lastArticleId}"/>
            <input name="nextArticleId" type="hidden" id="nextArticleId" th:field="*{nextArticleId}"/>
            <h4 class="form-header h4">基本信息</h4>
            <div class="row">
            	<div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">文章标题：</label>
                        <div class="col-sm-8">
                            <input name="title" placeholder="请输入文章标题" class="form-control" type="text" maxlength="30" th:field="*{title}" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">所属目录：</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                            	<input name="catalogName" onclick="selectCatalogTree()" id="catalogName" type="text" placeholder="请选择所属目录" class="form-control" th:field="*{catalogName}" required>
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">是否发布：</label>
                        <div class="col-sm-9">
                            <select name="isRelease" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" th:field="*{isRelease}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">上一篇文章：</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input name="lastArticleName" onclick="selectArticleTree('lastArticle')" id="lastArticleName" type="text" th:field="*{lastArticleName}" placeholder="请选择上一篇文章" class="form-control">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">下一篇文章：</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input name="nextArticleName" onclick="selectArticleTree('nextArticle')" id="nextArticleName" type="text" th:field="*{nextArticleName}" placeholder="请选择下一篇文章" class="form-control">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">是否评论：</label>
                        <div class="col-sm-9">
                            <select name="isDiscuss" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" th:field="*{isDiscuss}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">文章类型：</label>
                        <div class="col-sm-9">
                            <select name="articleType" class="form-control m-b" th:with="type=${@dict.getType('content_article_type')}" th:field="*{articleType}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">文章标签：</label>
                        <div class="col-sm-8">
                            <input name="articleTags" id="articleTags" class="form-control" type="text" maxlength="30"  th:field="*{articleTags}">
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">原文链接：</label>
                        <div class="col-sm-8">
                            <input name="articleUrl" class="form-control" type="text"  th:field="*{articleUrl}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-1 control-label is-required">文章描述：</label>
                        <div class="col-sm-11">
                            <input id="desca" name="desca" placeholder="请输入文章描述" class="form-control" type="text" th:field="*{desca}">
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">文章内容</h4>
            <div class="row">
                <div class="col-sm-12" id="content-editor">
                    <textarea style="display:none;" name="content" id="content" th:field="*{content}"></textarea>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
	<th:block th:include="common/include :: footer" />
	<th:block th:include="common/include :: select2-js" />
    <th:block th:include="common/include :: editormd-js" />
    <th:block th:include="common/include :: jquery-tags-input-js" />

    <script>
	    var prefix = ctx + "content/article";
        var module = "article";
        $(function() {
            $('#articleTags').tagsInput();
            var editor = editormd("content-editor", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                path   : ctx+"ajax/libs/editormd/lib/",
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : ctx+"common/editormdUpload",
                saveHTMLToTextarea : true
            });
        });

        $("#form-article-edit").validate({
        	onkeyup: false,
        	rules:{
                catalogName:{
                    required:true
                },
                isDiscuss:{
                    required:true
                },
                isRelease:{
                    required:true
                }
        	},
            focusCleanup: true
        });

        function submitHandler() {
	        if ($.validate.form()) {
	        	var data = $("#form-article-edit").serializeArray();
	        	$.operate.saveTab(prefix + "/edit", data);
	        }
	    }

        /*文章管理-新增-选择目录树*/
        function selectCatalogTree() {
        	var treeId = $("#catalogId").val();
        	var url = ctx + "content/catalog/selectCatalogTree/" + treeId+"-"+module;
			var options = {
				title: '选择目录',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}

		function doSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
				var body = layer.getChildFrame('body', index);
    			$("#catalogId").val(body.find('#treeId').val());
    			$("#catalogName").val(body.find('#treeName').val());
    			layer.close(index);
			}
		}

        var operaId = "";
        /*文章管理-选择文章*/
        function selectArticleTree(id) {
            operaId = id;
            var treeId = $("#"+operaId+"Id").val();
            var id = $.common.isEmpty(treeId) ? "null" : $("#"+operaId+"Id").val();
            var url = ctx + "content/article/selectArticleTree/" + id;
            var options = {
                title: '选择文章',
                width: "380",
                url: url,
                callBack: doArticleSubmit
            };
            $.modal.openOptions(options);
        }

        function doArticleSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#"+operaId+"Id").val(body.find('#treeId').val());
                $("#"+operaId+"Name").val(body.find('#treeName').val());
                layer.close(index);
            }
        }
    </script>
</body>
</html>
